<!--  -->
<template>
    <echarts :option="option" class="lineChart"/>
</template>

<script>
import echarts from '@/components/echarts/echarts';
export default {
	name: 'line-chart',
	data () {
		return {
			option: {
				legend: {
					data: ['邮件营销', '视频广告', '直接访问'],
					top: 30,
					textStyle: {
						color: '#52def1'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '60',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
					axisLine: {
						symbolSize: [12, 12],
						lineStyle: {
							color: '#52def1'
						}
					}
				},
				yAxis: {
					type: 'value',
					axisLine: {
						symbolSize: [12, 12],
						lineStyle: {
							color: '#52def1'
						}
					}
				},
				series: [
					{
						name: '邮件营销',
						type: 'line',
						stack: '总量',
						symbol: 'circle', // 折线点设置为实心点
						symbolSize: 12, // 折线点的大小
						smooth: true,
						data: [0, 132, 101, 134, 90, 230, 210],
						itemStyle: {
							color: '#5cfbff',
							shadowColor: '#5cfbff',
							shadowBlur: 20,
						},
						lineStyle: {
							shadowColor: '#5cfbff',
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							opacity: 1,
							shadowBlur: 8,
							type: 'solid',
							width: 4
						},

					},
					{
						name: '视频广告',
						type: 'line',
						smooth: true,
						stack: '总量',
						symbol: 'circle', // 折线点设置为实心点
						symbolSize: 12, // 折线点的大小
						data: [0, 232, 201, 154, 190, 330, 410],
						itemStyle: {
							color: '#ecf390',
							shadowColor: '#ecf390',
							shadowBlur: 9.5,
						},
						lineStyle: {
							shadowColor: '#ecf390',
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							opacity: 1,
							shadowBlur: 8,
							type: 'solid',
							width: 4,
						},
					},
					{
						name: '直接访问',
						type: 'line',
						stack: '总量',
						smooth: true,
						symbol: 'circle', // 折线点设置为实心点
						symbolSize: 12, // 折线点的大小
						data: [0, 332, 301, 334, 390, 330, 320],
						itemStyle: {
							color: '#bbffce',
							shadowColor: '#bbffce',
							shadowBlur: 9.5,
						},
						lineStyle: {
							width: 4,
							shadowColor: '#bbffce',
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							opacity: 1,
							shadowBlur: 8,
							type: 'solid'
						},
					},

				],
				textStyle: {
					color: '#52def1'
				}
			}
		};
	},

	components: {
		echarts
	},

	computed: {},

	// mounted: {},

	methods: {}
};

</script>
<style lang='less' rel="stylesheet/less" scoped>
.lineChart{
        width:100%;
        height:100%
    }
</style>
